import React from 'react';
import { Teacher, stageOptions } from '../../../shared/models';
import { useData } from '../../../shared/DataContext';
import './TeacherDetailModal.css';
interface TeacherDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  teacher: Teacher | null;
}

const TeacherDetailModal: React.FC<TeacherDetailModalProps> = ({ isOpen, onClose, teacher }) => {
  if (!isOpen || !teacher) return null;
  
  // 从数据上下文获取academyOptions
  const { academyOptions } = useData();

  // 选项数据定义
  const subjectOptions = [
    { value: 'chinese', label: '语文' },
    { value: 'math', label: '数学' },
    { value: 'english', label: '英语' },
    { value: 'physics', label: '物理' },
    { value: 'chemistry', label: '化学' },
    { value: 'biology', label: '生物' },
    { value: 'history', label: '历史' },
    { value: 'geography', label: '地理' },
    { value: 'politics', label: '政治' }
  ];

  // 使用从shared/models.ts导入的stageOptions，添加全部阶段选项
  const enhancedStageOptions = [
    { value: 'all', label: '全部阶段' },
    ...stageOptions
  ];

  const positionOptions = [
    { value: 'teacher', label: '讲师' },
    { value: 'headteacher', label: '导员' },
    { value: 'director', label: '阶段主任' },
    { value: 'principal', label: '院长' }
  ];

  const educationOptions = [
    { value: 'bachelor', label: '本科' },
    { value: 'master', label: '硕士' },
    { value: 'doctor', label: '博士' },
    { value: 'associate', label: '大专' }
  ];

  const statusOptions = [
    { value: 'active', label: '在职' },
    { value: 'leave', label: '请假' },
    { value: 'resigned', label: '已离职' },
    { value: 'retired', label: '已退休' }
  ];

  const departmentOptions = [
    { value: 'chinese', label: '语文组' },
    { value: 'math', label: '数学组' },
    { value: 'english', label: '英语组' },
    { value: 'science', label: '科学组' },
    { value: 'humanities', label: '人文组' },
    { value: 'administration', label: '行政部门' }
  ];

  // 获取选项的显示文本
  const getOptionLabel = (value: string, options: Array<{value: string, label: string}>) => {
    const option = options.find(opt => opt.value === value);
    return option ? option.label : value;
  };

  // 获取状态对应的样式类名
  const getStatusClassName = (status: string) => {
    switch (status) {
      case 'active':
        return 'status-active';
      case 'leave':
        return 'status-leave';
      case 'retired':
        return 'status-retired';
      default:
        return '';
    }
  };

  // 格式化日期
  const formatDate = (dateString: string) => {
    if (!dateString) return '-';
    try {
      return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    } catch {
      return dateString;
    }
  };

  return (
    <div className="modal-overlay">
      <div className="modal-container detail-modal">
        <div className="modal-header">
          <h2>教师详情</h2>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        
        <div className="modal-body detail-body">
          <div className="teacher-detail-content">
            {/* 教师基本信息卡片 */}
            <div className="detail-card">
              <h3>基本信息</h3>
              <div className="detail-grid">
                <div className="detail-item">
                  <span className="detail-label">姓名：</span>
                  <span className="detail-value">{teacher.name}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">教师ID：</span>
                  <span className="detail-value">{teacher.id}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">性别：</span>
                  <span className="detail-value">{teacher.gender === 'male' ? '男' : '女'}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">出生日期：</span>
                  <span className="detail-value">{formatDate(teacher.dateOfBirth)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">学历：</span>
                  <span className="detail-value">{getOptionLabel(teacher.education, educationOptions)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">状态：</span>
                  <span className={`status-badge ${getStatusClassName(teacher.status)}`}>
                    {getOptionLabel(teacher.status, statusOptions)}
                  </span>
                </div>
              </div>
            </div>

            {/* 工作信息卡片 */}
            <div className="detail-card">
              <h3>工作信息</h3>
              <div className="detail-grid">
                <div className="detail-item">
                  <span className="detail-label">科目：</span>
                  <span className="detail-value">{getOptionLabel(teacher.subject, subjectOptions)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">教授阶段：</span>
                  <span className="detail-value">{getOptionLabel(teacher.stage, enhancedStageOptions)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">所属学院：</span>
                  <span className="detail-value">{getOptionLabel(teacher.academy || '人工智能', academyOptions)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">职位：</span>
                  <span className="detail-value">{getOptionLabel(teacher.position, positionOptions)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">部门：</span>
                  <span className="detail-value">{getOptionLabel(teacher.department, departmentOptions)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">入职日期：</span>
                  <span className="detail-value">{formatDate(teacher.hireDate)}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">薪资等级：</span>
                  <span className="detail-value">{teacher.salaryLevel || '-'}</span>
                </div>
              </div>
            </div>

            {/* 联系方式卡片 */}
            <div className="detail-card">
              <h3>联系方式</h3>
              <div className="detail-grid">
                <div className="detail-item">
                  <span className="detail-label">联系电话：</span>
                  <span className="detail-value">{teacher.phone}</span>
                </div>
                <div className="detail-item">
                  <span className="detail-label">电子邮箱：</span>
                  <span className="detail-value">{teacher.email}</span>
                </div>
                <div className="detail-item full-width">
                  <span className="detail-label">家庭住址：</span>
                  <span className="detail-value">{teacher.address || '-'}</span>
                </div>
              </div>
            </div>

            {/* 资格证书卡片 */}
            {teacher.qualifications && teacher.qualifications.length > 0 && (
              <div className="detail-card">
                <h3>资格证书</h3>
                <div className="qualifications-container">
                  {teacher.qualifications.map((qualification, index) => (
                    <div key={index} className="qualification-badge">
                      {qualification}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
        
        <div className="modal-footer">
          <button className="btn-close" onClick={onClose}>
            关闭
          </button>
        </div>
      </div>
    </div>
  );
};

export default TeacherDetailModal;